<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Carousel Tests</title>
<link href="../../../themes/common/domButtons/DomButtonRedBadge.css" rel="stylesheet"/>
<link href="../../../themes/common/domButtons/DomButtonGreenBadge.css" rel="stylesheet"/>
<link href="../../../themes/common/domButtons/DomButtonBlueBadge.css" rel="stylesheet"/>
<script type="text/javascript" src="../../../deviceTheme.js"></script>
<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
	var store1;
	require([
		"dojo/dom",
		"dojo/dom-class", // dojo.hasClass
		"dojo/dom-construct", // dojo.place
		"dojo/ready", // dojo.ready
		"dijit/registry",  // dijit.byId
		"doh/runner",	//doh functions
		"dojox/mobile/Badge",
		"dojox/mobile/Pane",
		"dojox/mobile",				// This is a mobile app.
		"dojox/mobile/View",		// This mobile app uses mobile view
		"dojox/mobile/compat",		// This mobile app supports running on desktop browsers
		"dojox/mobile/parser"		// This mobile app uses declarative programming with fast mobile parser
	], function(dom, domClass, domConst, ready, registry, runner, Badge){

		var WIDGET_VALUE1 = "6";
		var WIDGET_VALUE2 = "48";
		var WIDGET_VALUE3 = "320";
		var WIDGET_CLASSNAME1 = "mblBadge";
		var WIDGET_CLASSNAME2 = "mblDomButton";
		var WIDGET_CLASSNAME3 = "mblDomButtonRedBadge";
		var WIDGET_CLASSNAME4 = "mblDomButtonBlueBadge";
		var WIDGET_CLASSNAME5 = "mblDomButtonGreenBadge";

		function _createBadgeDeclaratively(id) {
			return registry.byId(id);
		};
		
		function _createBadgeProgrammatically(placeHolderIds, ids){
			var widget1 = new Badge({value:WIDGET_VALUE1});
			runner.assertNotEqual(null, widget1);
			widget1.domNode.id = ids[0];
			domConst.place(widget1.domNode, placeHolderIds[0], "replace");
			var widget2 = new Badge({value:WIDGET_VALUE2, className:"mblDomButtonBlueBadge"});
			runner.assertNotEqual(null, widget2);
			widget2.domNode.id = ids[1];
			domConst.place(widget2.domNode, placeHolderIds[1], "replace");
			var widget3 = new Badge({value:WIDGET_VALUE3, className:"mblDomButtonGreenBadge", fontSize:11});
			runner.assertNotEqual(null, widget3);
			widget3.domNode.id = ids[2];
			domConst.place(widget3.domNode, placeHolderIds[2], "replace");
			return widget1;
		};
		
		function _createBadgeProgrammaticallyWithSourceNodeReference(ids){
			var widget1 = new Badge({value:WIDGET_VALUE1}, dom.byId(ids[0]));
			runner.assertNotEqual(null, widget1);
			var widget2 = new Badge({value:WIDGET_VALUE2, className:"mblDomButtonBlueBadge"}, dom.byId(ids[1]));
			runner.assertNotEqual(null, widget2);
			var widget3 = new Badge({value:WIDGET_VALUE3, className:"mblDomButtonGreenBadge", fontSize:11}, dom.byId(ids[2]));
			runner.assertNotEqual(null, widget3);
			return widget1;
		};

		function _assertBadge(ids){
			var widget1 = dom.byId(ids[0]);
			runner.assertNotEqual(null, widget1, ids[0]);
			runner.assertEqual(WIDGET_VALUE1, widget1.childNodes[0].innerHTML, widget1.id)
			runner.assertTrue(domClass.contains(widget1, WIDGET_CLASSNAME1), WIDGET_CLASSNAME1 + " id=" + widget1.id + " value=" + widget1.className);
			runner.assertTrue(domClass.contains(widget1, WIDGET_CLASSNAME2), WIDGET_CLASSNAME2 + " id=" + widget1.id + " value=" + widget1.className);
			runner.assertTrue(domClass.contains(widget1, WIDGET_CLASSNAME3), WIDGET_CLASSNAME3 + " id=" + widget1.id + " value=" + widget1.className);

			var widget2 = dom.byId(ids[1]);
			runner.assertNotEqual(null, widget2, ids[1]);
			runner.assertEqual(WIDGET_VALUE2, widget2.childNodes[0].innerHTML, widget2.id)
			runner.assertTrue(domClass.contains(widget2, WIDGET_CLASSNAME1), WIDGET_CLASSNAME1 + " id=" + widget2.id + " value=" + widget2.className);
			runner.assertTrue(domClass.contains(widget2, WIDGET_CLASSNAME2), WIDGET_CLASSNAME2 + " id=" + widget2.id + " value=" + widget2.className);
			runner.assertTrue(domClass.contains(widget2, WIDGET_CLASSNAME4), WIDGET_CLASSNAME4 + " id=" + widget2.id + " value=" + widget2.className);

			var widget3 = dom.byId(ids[2]);
			runner.assertNotEqual(null, widget3, ids[2]);
			runner.assertEqual(WIDGET_VALUE3, widget3.childNodes[0].innerHTML, widget3.id)
			runner.assertTrue(domClass.contains(widget3, WIDGET_CLASSNAME1), WIDGET_CLASSNAME1 + " id=" + widget3.id + " value=" + widget3.className);
			runner.assertTrue(domClass.contains(widget3, WIDGET_CLASSNAME2), WIDGET_CLASSNAME2 + " id=" + widget3.id + " value=" + widget3.className);
			runner.assertTrue(domClass.contains(widget3, WIDGET_CLASSNAME5), WIDGET_CLASSNAME5 + " id=" + widget3.id + " value=" + widget3.className);
		};
		
		function _showView2(){
			var view1 = registry.byId("view1");
			view1.performTransition("view2", 1, "none");
		};

		ready(function(){
			runner.register("dojox.mobile.test.doh.CarouselTests", [
				{
					name: "Carousel Verification1",
					timeout: 4000,
					runTest: function(){
						var badge1 = _createBadgeDeclaratively("view1-Badge11");
						var badge2 = _createBadgeProgrammatically(["view1-Badge21place", "view1-Badge22place", "view1-Badge23place"], ["view1-Badge21", "view1-Badge22", "view1-Badge23"]);
						var badge3 = _createBadgeProgrammaticallyWithSourceNodeReference(["view1-Badge31", "view1-Badge32", "view1-Badge33"]);

						_assertBadge(["view1-Badge11", "view1-Badge12", "view1-Badge13"]);
						_assertBadge(["view1-Badge21", "view1-Badge22", "view1-Badge23"]);
						_assertBadge(["view1-Badge31", "view1-Badge32", "view1-Badge33"]);
					}
				},
				{
					name: "Carousel Verification2",
					timeout: 4000,
					runTest: function(){
						var badge1 = _createBadgeDeclaratively("view2-Badge11");
						var badge2 = _createBadgeProgrammatically(["view2-Badge21place", "view2-Badge22place", "view2-Badge23place"], ["view2-Badge21", "view2-Badge22", "view2-Badge23"]);
						var badge3 = _createBadgeProgrammaticallyWithSourceNodeReference(["view2-Badge31", "view2-Badge32", "view2-Badge33"]);
						
						_showView2();

						_assertBadge(["view2-Badge11", "view2-Badge12", "view2-Badge13"]);
						_assertBadge(["view2-Badge21", "view2-Badge22", "view2-Badge23"]);
						_assertBadge(["view2-Badge31", "view2-Badge32", "view2-Badge33"]);
					}
				}
			]);
			runner.run();
		});
	})
</script>
</head>
<body>
	<div id="view1" data-dojo-type="dojox.mobile.View" selected="true">
		<h1>View 1</h1>
		<div data-dojo-type="dojox.mobile.Pane" style="padding:0px 30px 0px 30px;">
			<div id="view1-Badge11" data-dojo-type="dojox.mobile.Badge" class="mblDomButtonRedBadge" data-dojo-props='value:"6"'></div>
			<div id="view1-Badge12" data-dojo-type="dojox.mobile.Badge" class="mblDomButtonBlueBadge" data-dojo-props='value:"48"'></div>
			<div id="view1-Badge13" data-dojo-type="dojox.mobile.Badge" class="mblDomButtonGreenBadge" data-dojo-props='value:"320",fontSize:11'></div>
			<div id="view1-Badge21place"></div>
			<div id="view1-Badge22place"></div>
			<div id="view1-Badge23place"></div>
			<div id="view1-Badge31"></div>
			<div id="view1-Badge32"></div>
			<div id="view1-Badge33"></div>
		</div>
	</div>	
	<div id="view2" data-dojo-type="dojox.mobile.View">
		<h1>View 2</h1>
		<div data-dojo-type="dojox.mobile.Pane" style="padding:0px 30px 0px 30px;">
			<div id="view2-Badge11" data-dojo-type="dojox.mobile.Badge" class="mblDomButtonRedBadge" data-dojo-props='value:"6"'></div>
			<div id="view2-Badge12" data-dojo-type="dojox.mobile.Badge" class="mblDomButtonBlueBadge" data-dojo-props='value:"48"'></div>
			<div id="view2-Badge13" data-dojo-type="dojox.mobile.Badge" class="mblDomButtonGreenBadge" data-dojo-props='value:"320",fontSize:11'></div>
			<div id="view2-Badge21place"></div>
			<div id="view2-Badge22place"></div>
			<div id="view2-Badge23place"></div>
			<div id="view2-Badge31"></div>
			<div id="view2-Badge32"></div>
			<div id="view2-Badge33"></div>
		</div>
	</div>
</body>
</html>
